<template>
  <div style="background-color: #fff;min-height: 100vh;">
    <div style="width: 210mm;margin: 0 auto; padding: 60px 0;">
      <div ref="print">
        <div style="font-size: 24px;text-align: center;">金华眼科医院屈光发育检查报告单</div>

        <div class="print-moudle">
          <span class="print-title" style="float: left;">人员基本信息</span>
          <el-button type="info" class="noprint" style="float: right;" @click="printHandle">打印</el-button>
          <div style="clear: both;"></div>
          <hr />
          <el-row>
            <el-col :span="6">
              <span>姓名：</span>
              <span>{{personInfo.name}}</span>
            </el-col>
            <el-col :span="6">
              <span>姓别：</span>
              <span v-if="personInfo.gender == '0'">男</span>
              <span v-if="personInfo.gender == '1'">女</span>
              <!-- <span>{{valueChangeName(personInfo.gender,genderOption)}}</span> -->
            </el-col>
            <el-col :span="6">
              <span>出生年月：</span>
              <span>{{personInfo.birthDay}}</span>
            </el-col>
            <el-col :span="6">
              <span>民族：</span>
              <span>{{valueChangeName(personInfo.nation,nationalList)}}</span>
            </el-col>
            <!-- <el-col :span="6">
              <span>家长姓名：</span>
              <span>{{personInfo.telPhone}}</span>
            </el-col> -->
            <el-col :span="6">
              <span>联系电话：</span>
              <span>{{personInfo.telPhone}}</span>
            </el-col>
            <el-col :span="12">
              <span>家庭住址：</span>
              <span>{{personInfo.address}}</span>
            </el-col>
          </el-row>
        </div>

        <div class="print-moudle">
          <el-row>
            <el-col :span="4"><span class="print-title">体检详细信息 </span></el-col>
            <el-col :span="5"><span class="print-title">第(1)次体检</span></el-col>
            <el-col :span="4">
              <span>主检医生：</span>
              <span>{{optometry.checkDoctorName}}</span>
            </el-col>
            <el-col :span="5">
              <span>主检部门：</span>
              <span>{{optometry.deptName}}</span>
            </el-col>
            <el-col :span="5">
              <span>体检时间：</span>
              <span>{{optometry.checkDate}}</span>
            </el-col>
          </el-row>
          <hr />
          <el-row>
            <el-col :span="6">
              <span>身高：</span>
              <span v-if="optometry.height">{{optometry.height}}CM</span>
            </el-col>
            <el-col :span="6">
              <span>体重：</span>
              <span v-if="optometry.weight">{{optometry.weight}}Kg</span>
            </el-col>
            <el-col :span="6">
              <span>握笔姿势：</span>
              <span v-if="personInfo.pencilGrasps == '0'">正确</span>
              <span v-if="personInfo.pencilGrasps == '1'">错误</span>
            </el-col>
            <el-col :span="6">
              <span>色觉：</span>
              <span v-if="personInfo.colorVision == '0'">正常</span>
              <span v-if="personInfo.colorVision == '1'">色弱</span>
              <span v-if="personInfo.colorVision == '2'">色盲</span>
            </el-col>
            <el-col :span="6">
              <span>习惯用手：</span>
              <!-- <span v-if="personInfo.personExtProp.habitHand == 'Y'">右手</span>
              <span v-if="personInfo.personExtProp.habitHand == 'Z'">左手</span> -->
              <!-- <span>{{valueChangeName(personInfo.personExtProp.habitHand,habitHand)}}</span> -->
            </el-col>
            <el-col :span="6">
              <span>集合近点：</span>
              <span v-if="optometry.nearPoint">{{optometry.nearPoint}}cm</span>
            </el-col>
            <el-col :span="6">
              <span>优势眼：</span>
              <span v-if="optometry.masterEye == '0'">右眼</span>
              <span v-if="optometry.masterEye == '1'">左眼</span>
            </el-col>
            <el-col :span="6">
              <span>眼位：</span>
              <span v-if="optometry.eyePosition == '0'">正位</span>
              <span v-if="optometry.eyePositionCrypticInfo == '1'">内</span>
              <span v-if="optometry.eyePositionCrypticInfo == '2'">外</span>
              <span v-if="optometry.eyePositionCrypticInfo == '3'">上</span>
              <span v-if="optometry.eyePositionCrypticInfo == '4'">下</span>
              <span v-if="optometry.eyePosition == '1'">隐斜</span>
              <span v-if="optometry.eyePositionInfo == '1'">内</span>
              <span v-if="optometry.eyePositionInfo == '2'">外</span>
              <span v-if="optometry.eyePositionInfo == '3'">上</span>
              <span v-if="optometry.eyePositionInfo == '4'">下</span>
              <span v-if="optometry.eyePosition == '2'">显斜</span>
            </el-col>
          </el-row>
          <el-row style="margin-top: 30px;">
            <el-col :span="24">
              <table class="print-table">
                <tr>
                  <th>检查项目</th>
                  <th>右眼</th>
                  <th>左眼</th>
                  <th class="border-right">参考值</th>
                  <th>检查项目</th>
                  <th>右眼</th>
                  <th>左眼</th>
                  <th>参考值</th>
                </tr>
                <template v-for="(item,index) in checkDataValues">
                  <tr v-if="index%2 == 0">
                    <td>{{item.chName}}</td>
                    <td>{{item.odValue}}</td>
                    <td>{{item.osValue}}</td>
                    <td class="border-right">{{item.standardValue}}</td>
                    <td v-if="index == checkDataValues.length - 1" :colspan="4"></td>
                    <td v-if="index < checkDataValues.length - 1">{{checkDataValues[index + 1].chName}}</td>
                    <td v-if="index < checkDataValues.length - 1">{{checkDataValues[index + 1].odValue}}</td>
                    <td v-if="index < checkDataValues.length - 1">{{checkDataValues[index + 1].osValue}}</td>
                    <td v-if="index < checkDataValues.length - 1">{{checkDataValues[index + 1].standardValue}}</td>
                  </tr>
                </template>

              </table>
            </el-col>
          </el-row>
        </div>

        <div>
          <div class="print-title">结论</div>
          <hr />
          <div class="conclusion">
            <div class="conclusion-item">
              <span>屈光状态：</span>
              <span>{{statusChangeName(optometry.refractiveStatus,refractiveOption)}}</span>
            </div>
            <div class="conclusion-item">
              <span>近视预警：</span>
              <span v-if="optometry.myopiaWarning == 'R'">红色</span>
              <span v-if="optometry.myopiaWarning == 'Y'">黄色</span>
              <span v-if="optometry.myopiaWarning == 'B'">蓝色</span>
            </div>
            <div class="conclusion-item">
              <span>眼病：</span>
              <span>{{optometry.eyeDisease}}</span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { remote } from '@/api/admin/dict'
  import { fetchNationalList } from '@/api/admin/national'
  import { getReportData } from '@/api/pvm/arcoptometry'

  export default {
    data() {
      return {
        personInfo: {},
        optometry: {},
        checkDataValues: [],
        nationalList: [],
        refractiveOption: []
      }
    },
    computed: {
      ...mapGetters(['bizData'])
    },
    created(){
      this.$nextTick(() => {
        remote('refractive_status').then(result => {
          this.refractiveOption = result.data.data
        })
        this.getNationalList().then(result => {
          getReportData(this.$route.query.id).then(response => {
            let resultData = response.data.data
            this.personInfo = resultData.personInfo
            this.optometry = resultData.optometry
            this.checkDataValues = resultData.checkDataValues
            // let checkDataValues = resultData.checkDataValues

            // let checkDataValuesList = []
            // for(let i = 0; i < checkDataValues.length; i = i + 2){
            //   let list = [checkDataValues[i],checkDataValues[i + 1]]
            //   checkDataValuesList.push(list)
            // }
            // this.checkDataValues = checkDataValuesList
          })
        })
      })
    },
    methods: {
      printHandle() {
        this.$print(this.$refs.print)
      },
      // 获取民族列表
      async getNationalList(){
        await fetchNationalList({ current: 1, size: 100 }).then(result => {
          this.nationalList = result.data.data.records
        })
      },
      //
      valueChangeName(value,option){
        let obj = {}
        obj = option.find(item => {
          if(item.id == value || item.value == value){
            return item
          }
        })
        if(obj && obj.name){
          return obj.name
        }
      },
      statusChangeName(value,option){
        let obj = {}
        obj = option.find(item => {
          if(item.value == value){
            return item
          }
        })
        if(obj && obj.label){
          return obj.label
        }
      }
    }
  }
</script>

<style>
  @media print {
    .noprint {
      display: none !important;
    }
  }
</style>
<style lang="scss" scoped>
  .print-moudle {
    margin-bottom: 20px;
  }

  .print-title {
    font-size: 18px;
    font-weight: 700;
  }
  .print-table {
    width: 90%;
    th {
      border-top: solid 1px #e7e7e7;
    }

    tr {
      border-bottom: solid 1px #efefef;
    }

    // tr th {
    //   background-color: #f4f5f7;
    // }
    tr th, tr td {
      padding: 10px 3px;
      // border: solid 1px #e7e7e7;
      text-align: center;
    }
    .border-right {
      border-right: solid 1px #e7e7e7;
    }
  }

  .conclusion {
    display: flex;
  }

  .conclusion-item {
    margin-right: 15px;
  }
</style>
